/* eslint-disable quote-props */
import React, {useState} from 'react';
import {Typography, Form, Row, Col, DatePicker, Space, Button, Select} from 'antd';
import moment from 'moment';
import {useMount, useDebounceFn} from 'ahooks';
import CommonTable from '../common/CommonTable';
import CommonCard from '../common/CommonCard';
import SearchSelect from '../common/SearchSelect';
import {BizLineList, ClientList, dimensionMap} from '../config';
import Charts from './Charts';

import '../style.styl';
import './index.styl';

const {Title} = Typography;
const {Option} = Select;

export default () => {
    const [searchParams, setSearchParams] = useState([]);
    const [basicForm] = Form.useForm();
    const [sortInfo, setSortInfo] = useState({});
    const [formLoading, setFormLoading] = useState(true);

    const handleFinish = values => {
        const keys = Object.keys(values);
        const dimensionAndValues = keys?.filter(i => values[i])?.map(i => ({
            dimensionId: i,
            dimensionName: dimensionMap.get(i).constructor === Object
                ? dimensionMap.get(i).dimensionName
                : dimensionMap.get(i),
            value: (values[i] instanceof moment || moment.isMoment(values[i]))
                ? [values[i].format('YYYY-MM-DD')]
                : [values[i]],
        }));
        setSearchParams(dimensionAndValues);
        setSortInfo({});
    };

    const handleReset = () => {
        basicForm.resetFields();
        basicForm.submit();
        setSortInfo({});
    };

    const {run: handleDebounceFinish} = useDebounceFn(values => {
        handleFinish(values);
    }, {wait: 500});

    useMount(() => {
        basicForm.submit();
    });

    return (
        <div className="liveBoard">
            <Title level={3}>
                roomserver监控
            </Title>
            <Form
                form={basicForm}
                name="basicForm"
                initialValues={{
                    'RoomServer_Monitor_PartOne_select_dt': moment(),
                    'RoomServer_Monitor_PartOne_select_biz_type': '高途课堂',
                    'RoomServer_Monitor_PartOne_select_client_type': '全部',
                    'RoomServer_Monitor_PartOne_select_rs_address': '全部',
                }}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}
                onFinish={handleDebounceFinish}
            >
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            label="日期"
                            name="RoomServer_Monitor_PartOne_select_dt"
                        >
                            <DatePicker
                                allowClear={false}
                                format="YYYY-MM-DD"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="业务线"
                            name="RoomServer_Monitor_PartOne_select_biz_type"
                        >
                            <Select
                                getPopupContainer={node => node.parentNode}
                            >
                                {
                                    BizLineList.map(item => (
                                        <Option
                                            value={item.value}
                                            key={item.value}
                                        >
                                            {item.name}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="客户端类型"
                            name="RoomServer_Monitor_PartOne_select_client_type"
                        >
                            <Select
                                getPopupContainer={node => node.parentNode}
                            >
                                {
                                    ClientList.map(item => (
                                        <Option
                                            value={item.value}
                                            key={item.value}
                                        >
                                            {item.name}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            label="服务器名称"
                            name="RoomServer_Monitor_PartOne_select_rs_address"
                        >
                            <SearchSelect
                                selectName="RoomServer_Monitor_PartOne_select_rs_address"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={16}>
                        <Row justify="end">
                            <Space>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={formLoading}
                                >
                                    搜索
                                </Button>
                                <Button
                                    htmlType="button"
                                    onClick={handleReset}
                                    loading={formLoading}
                                >
                                    重置
                                </Button>
                            </Space>
                        </Row>
                    </Col>
                </Row>
            </Form>
            <div className="index-search-result">
                <Charts searchParams={searchParams} setFormLoading={setFormLoading} />
                <CommonCard title="错误信息详情">
                    <CommonTable
                        searchParams={searchParams}
                        title="roomServer错误信息详情"
                        rowKey="错误信息"
                        scroll={{
                            x: '100%',
                        }}
                        cellWidth={['', '110px', '110px']}
                        sortInfo={sortInfo}
                        setSortInfo={setSortInfo}
                        loading={formLoading}
                        setLoading={setFormLoading}
                        className="roomserver-table"
                    />
                </CommonCard>
            </div>
        </div>
    );
};
